<template>
  <div class="dynamic">
    <div class="today">
      <span>考勤动态</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <span class="time">{{time}}</span>
    </div>
    <div class="choseDay">
      <!-- 选择查看日期 静态 -->
      <span class="today">今日考勤</span>&nbsp;&nbsp;&nbsp;&nbsp;
      <!-- 出勤率 -->
      <span>出勤率:95%</span>
    </div>
    <div class="circleChart">
      <div class="normal algin">
        <div class="shape">80</div>
        <span>正常</span>
      </div>
      <div class="later algin">
        <div class="shape">4</div>
        <span>迟到</span>
      </div>
      <div class="absence algin">
        <div class="shape">1</div>
        <span>缺勤</span>
      </div>
      <div class="leave algin">
        <div class="shape">0</div>
        <span>请假</span>
      </div>
    </div>
    <div id="lineChart" ref="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: "CheckDynamic",
  data() {
    return {
     myCharts:'',
    //  optionData:['3','2','4','4','5']
    };
  },
  computed: {
    time() {
      var time = "当前时间";
      return time;
    },
  },
  methods:{
    setLineChart(){
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(this.$refs.lineChart);
      // 绘制图表
      this.myChart.setOption({
        title: {
          text: ''
        },
        legend:{
        },
        tooltip: {
          trigger:'axis'
        },
        xAxis: {
          data: [
            '1', '2', '3', '4', '5','6','7','8','9','10'
            ,'11', '12', '13', '14', '15','16','17','18','19','20'
            ]
        },
        yAxis: {
          data: [ '80%','85%','90%','95%','100%']
        },
        series: [
          {
            name: '出勤率趋势图',
            type: 'bar',
            data: ['90%','85%','90%','95%','100%','90%','85%','90%','95%','100%','90%','85%','90%','95%','100%','90%','85%','90%','95%','100%']
          }
        ]
      });
    }
  },
  mounted(){
    this.setLineChart()
    
  }
};
</script>

<style lang='less' scoped>
  .dynamic{
    font-size: .5rem;
    .today{
      font-weight: 700;
    }
    .choseDay{
      margin:1rem 0 0 0;
      .today{
        background-color: rgb(62, 71, 234);
        border-radius: .3rem;
        color: white;
        font-weight: 400;
        padding: .2rem;
      } 
    }
    .circleChart{
      padding: 1rem 0 0 0;
      display: flex;
      justify-content: space-between;
      align-content: center;
      .shape{
        width: 5rem;
        height: 5rem;
        border-radius: 2.5rem;
        margin:0 0 .4rem 0;
        text-align: center;
        line-height: 5rem;
        color:white;
        font-size: 1rem;
      }
      .algin{
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .normal div{
        background-color:rgb(62, 71, 234);
      }
      .normal span{
        text-align: center;
      }
      .later div{
        background-color:rgb(80, 80, 82);
      }
      .later span{
        text-align: center;
      }
      .absence div{
        background-color:rgb(183, 46, 46);
      }
      .absence span{
        text-align: center;
      }
      .leave div{
        background-color:rgb(245, 163, 70);
      }
      .leave span{
        text-align: center;
      }
    }
    #lineChart{
      // border: 1px solid blue;
      margin: 1rem 0 0 0;
      width: 100%;
      height:15rem;
    }
  }
</style>